<template>
  <div class="video-wrap">
    <div class="container cruise-video">
      <video id="videoId" :url="url" controls="true" height="150" width="100%" muted></video>
      <div class="btn-wrap">
        <!-- <div class="stop-btn" @click="stopFn()">
          <img src="@/assets/img/video-stop2.png" title="停止" />
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import flvjs from "flv.js";
export default {
  name: "",
  components: {},
  props: {
    url: {
      type: String,
      default: ""
    }
  },
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {
    console.log(this.url);
    if (flvjs.isSupported() && this.url != "") {
      this.initPlay();
    }
  },
  methods: {
    initPlay() {
      let videoElement = document.getElementById("videoId");
      let flvPlayer = flvjs.createPlayer({
        type: "flv",
        isLive: true,
        hasAudio: false,
        url: this.url
      });
      console.log(flvPlayer, "flv对象");
      flvPlayer.attachMediaElement(videoId);
      flvPlayer.load();
      flvPlayer.play();
    },
    //停止
    // stopFn() {
    //   this.flvPlayer.pause();
    //   this.flvPlayer.unload();
    //   this.flvPlayer.detachMediaElement();
    //   this.flvPlayer.destroy();
    //   this.flvPlayer = null;
    // }
  },
  watch: {
    url(_new, _old) {
      if (_new != _old) {
        this.initPlay();
      }
    }
  }
};
</script>
<style scoped>
.video-wrap {
  width: 100%;
  height: auto;
  z-index: 999 !important;
}
.container {
  width: 100%;
  height: 100%;
}
.btn-wrap {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.stop-btn {
  cursor: pointer;
}
.stop-btn img {
  width: 70%;
  height: 70%;
}
/* 隐藏播放、暂停等各类播放器功能按钮 */

video::-webkit-media-controls-play-button {
  display: none;
}
video::-webkit-media-controls-timeline {
  display: none;
}
video::-webkit-media-controls-mute-button {
  display: none;
}
/* 
video::-webkit-media-controls-fullscreen-button {
    display: none;
}
video::-webkit-media-controls-current-time-display{
    display: none;            
}
video::-webkit-media-controls-time-remaining-display {
    display: none;            
}

video::-webkit-media-controls-toggle-closed-captions-button {
    display: none;            
}
video::-webkit-media-controls-volume-slider {
    display: none;            
}
video::-webkit-media-controls-enclosure{
    display: none;
} */

/* 视频全铺 */
.video {
  object-fit: fill;
}
</style>